﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>10 获取属性样式</title>
    <style type="text/css">
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload = function() {
            var box = document.getElementById('box');
            move(box);

            function move(obj) {
                setInterval(function() {
                    // obj.style.width = obj.offsetWidth - 1 + 'px';
                    obj.style.width = parseInt(getStyle(obj, 'width')) - 1 + 'px';
                }, 30);
            }
            /**
             * 获取元素属性的函数
             * @param {Object} obj  当前元素对象
             * @param {Object} attr  当前元素对象的属性
             */

            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    // 兼容ie
                    return obj.currentStyle[attr];
                } else {
                    // 兼容主流浏览器
                    return getComputedStyle(obj, null)[attr];
                }
            }
        }
    </script>
</body>

</html>